<!-- 单设备页面 -->
<template>
  <div class="com-container">
    <div class="device-info radius shadow">
      <device-info />
    </div>

    <div class="health-score-box radius shadow">
      <health-score />
    </div>

    <div class="device-pic radius shadow" v-if="showPic">
      <img src="device.jpg" alt="图片加载失败" />
    </div>

    <button
      @click="showDevicePic"
      style="position: absolute; right: 32%; top: 30px; z-index: 10"
    >
      切换图片容器显示/隐藏
    </button>

    <div class="health-history-box radius shadow">
      <health-history />
    </div>
    <div class="index-box radius shadow">
      <device-index />
    </div>

    <div class="device-detail-box radius shadow">
      <device-details />
    </div>
  </div>
</template>

<script>
import DeviceInfo from "@/components/singledevice/DeviceInfo.vue";
import HealthScore from "@/components/HealthScore.vue";
import DeviceHealthHistory from "@/components/singledevice/DeviceHealthHistory.vue";
import DeviceIndex from "@/components/singledevice/DeviceIndex.vue";
import DeviceDetails from "@/components/singledevice/DeviceDetails.vue";
export default {
  components: {
    "device-info": DeviceInfo,
    "health-score": HealthScore,
    "health-history": DeviceHealthHistory,
    "device-index": DeviceIndex,
    "device-details": DeviceDetails,
  },
  data() {
    return {
      msg: "",
      deviceId: null,
      showPic: true, // 调试时临时使用，用于控制是否显示设备抓图图片的容器
    };
  },
  mounted() {},
  created() {},
  methods: {
    showDevicePic() {
      this.showPic = !this.showPic;
    },
  },
};
</script>

<style lang='less' scoped>
.device-info {
  position: absolute;
  width: 30%;
  height: 35%;
}
.health-score-box {
  position: absolute;
  left: 35%;
  top: 0;
  width: 30%;
  height: 35%;
}
.health-history-box {
  position: absolute;
  left: 35%;
  bottom: 0;
  width: 30%;
  height: 60%;
}
.index-box {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  height: 60%;
}
.device-detail-box {
  position: absolute;
  left: 0%;
  bottom: 0;
  width: 30%;
  height: 60%;
}
//设备抓图
.device-pic {
  position: absolute;
  right: 0;
  top: 0;
  width: 30%;
  height: 35%;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>